<template>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="stateManager.SeeDialogVisible"
           @cancel="closeDialog"
           @ok="closeDialog"
           :modal-title="modalTitle"
           model-size="normal">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <div class="row">
        <div class="col-xs-12">
            <div class="widget-head-color-box navy-bg p-lg text-center">
                <div class="m-b-md">
                    <h2 class="font-bold no-margins">
                        {{model.nick_name}}
                    </h2>
                </div>
                <img :src="model.qrcode_url" width="300px" class="img-thumbnail m-b-md" alt="profile">
                <!--<div>-->
                    <!--<span>100 Tweets</span> |-->
                    <!--<span>350 Following</span> |-->
                    <!--<span>610 Followers</span>-->
                <!--</div>-->
            </div>
            <div class="widget-text-box">
                <ul class="list-unstyled m-t-md">
                    <li>
                        <span class="fa fa-slack m-r-xs"></span>
                        <label>主体:</label>
                        {{model.principal_name}}
                    </li>
                    <li>
                        <span class="fa fa-slack m-r-xs"></span>
                        <label>签名:</label>
                        {{model.signature}}
                    </li>
                </ul>
            </div>
        </div>
        </div>
    </modal>


</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                model: this.$modelDataSource({
                    url: 'api/WeChat/list',
                    dataKey: 'model',
                    attributes: {
                        id: 0,
                        principal_name:'',
                        nick_name: '',
                        signature: '',
                        qrcode_url: '',
                    }
                })
            };
        },
        methods: {
            closeDialog: function () {
                this.stateManager.SeeDialogVisible = false;
                this.stateManager.SeeModelId = 0;
            }


        },
        computed: {
            modalTitle: function () {
                return '查看公众号信息';
            }
        },
        watch: {
            'stateManager.SeeModelId': function (newValue) {
                this.model.fetch(newValue);
            }
        }
    }
</script>